<template>
    <el-card v-if="session" class="box-card" style="width: 100%;">
        <div slot="header" class="clearfix">
            <!-- <span class="bold">{{session.SessionName}}</span> -->
            <el-input v-model="session.SessionName" style="width: 250px;"></el-input>
            <el-button style="float: right; padding-top: 10px;" type="text" v-if="changed" @click="updateSession">保存</el-button>
        </div>
        <el-row :gutter="20" style="margin-bottom: 20px;">
            <el-col :span="8">
                <div>
                    <el-statistic title="参赛人数">
                        <template slot="formatter"> {{ session.SessionCompetes.length }} </template>
                    </el-statistic>
                </div>
            </el-col>
            <el-col :span="8">
                <div>
                    <el-statistic title="比赛项目">
                        <template slot="formatter"> {{ session.CompeteEventName }} </template>
                    </el-statistic>
                </div>
            </el-col>
            <el-col :span="8">
                <div>
                    <el-statistic title="比赛组别">
                        <template slot="formatter"> {{ session.CompeteGroupName }} </template>
                    </el-statistic>
                </div>
            </el-col>
        </el-row>
        <el-divider content-position="center">场次信息</el-divider>
        <el-form label-width="100" size="mini">
            <el-form-item label="比赛时间">
                <el-date-picker v-model="session.SessionTime" type="datetime" style="width: 240px" 
                    format="HH:mm" value-format="yyyy-MM-dd HH:mm"></el-date-picker>
            </el-form-item>
            <el-form-item label="比赛类型">
                <el-radio-group v-model="session.SessionType">
                    <el-radio-button label="PRELIMINARY">初赛</el-radio-button>
                    <el-radio-button label="REMATCH">复赛</el-radio-button>
                    <el-radio-button label="FINALS">决赛</el-radio-button>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="比赛场地">
                <el-select v-model="session.SessionRoom" filterable placeholder="请选择" style="width: 240px">
                    <el-option v-for="item in rooms" :key="item.RoomId" :label="item.RoomSite" :value="item.RoomSite"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="比赛时长">
                <el-time-select v-model="session.SessionDuration" :picker-options="{ start: '00:00', step: '00:30', end: '10:00' }"  style="width: 240px"></el-time-select>
            </el-form-item>
        </el-form>
        <el-divider content-position="center">评委列表</el-divider>
        <el-form label-width="100" size="mini">
            <el-form-item label="评委组长">
                <el-select v-model="session.Jury0" filterable placeholder="请选择" style="width: 240px">
                    <el-option v-for="item in juries" :key="item.JuryId" :label="item.JuryName" :value="item.JuryName"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="评委成员">
                <el-select v-model="session.Jury1" filterable placeholder="请选择" style="width: 240px">
                    <el-option v-for="item in juries" :key="item.JuryId" :label="item.JuryName" :value="item.JuryName"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="评委成员">
                <el-select v-model="session.Jury2" filterable placeholder="请选择" style="width: 240px">
                    <el-option v-for="item in juries" :key="item.JuryId" :label="item.JuryName" :value="item.JuryName"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="评委成员">
                <el-select v-model="session.Jury3" filterable placeholder="请选择" style="width: 240px">
                    <el-option v-for="item in juries" :key="item.JuryId" :label="item.JuryName" :value="item.JuryName"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="评委成员">
                <el-select v-model="session.Jury4" filterable placeholder="请选择" style="width: 240px">
                    <el-option v-for="item in juries" :key="item.JuryId" :label="item.JuryName" :value="item.JuryName"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="评委成员">
                <el-select v-model="session.Jury5" filterable placeholder="请选择" style="width: 240px">
                    <el-option v-for="item in juries" :key="item.JuryId" :label="item.JuryName" :value="item.JuryName"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
    </el-card>
</template>

<script>

import { DeepClone } from 'web/utils';

export default {
    props: {
        'data': {
            type: Object,
            default: {}
        },
        'rooms': {
            type: Array
        },
        'juries': {
            type: Array
        }
    },
    watch: {
        'data': {
            handler: function(value){
                this.session = DeepClone(value);
            },
            deep: true,
            immediate: true,
        },
        'session': {
            handler: function(value){
                this.changed = true;
            },
            deep: true
        }
    },
    data() {
        return {
            changed: false,
            session: {
                SessionCompetes: []
            }
        }
    },
    methods: {
        updateSession() {
            let session = DeepClone(this.session);
            session.SessionCompetes = null;
            session.SessionTime0 = session.SessionTime;
            session.SessionTime1 = session.SessionTime;
            this.$SessionService.ModifySession(session)
                .then(ret => {
                    if (ret) {
                        this.$notify({
                                title: '修改成功',
                                message: `场次${session.SessionName}创建成功`,
                                type: 'success'
                            });
                        this.$emit('SessionCreated', session);
                    }
                })
        }
    }
}
</script>

<style>
.el-statistic .con .number {
    font-size: 16px;
}

.el-card__header .el-input__inner {
    border: none;
    font-size: 16px;
    font-weight: 700;
}
</style>
